<template>
  <CloudDialog
    :visible="visible"
    title="日志详情"
    :width="800"
    :mask-closable="false"
    :before-open="handleBeforeOpen"
    :cancel="handleCancel"
    :hide-cancel="true"
    ok-text="关闭">
    <div class="flex flex-col gap-y-6">
      <div>
        <div class="log-details-title">请求信息</div>
        <div class="log-details-subtitle">
          {{ dayjs(record.time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
        </div>
      </div>

      <a-descriptions
        bordered
        size="large"
        :label-style="{ width: '100px' }"
        :value-style="{ minWidth: '148px', maxWidth: '650px' }"
        :column="3">
        <a-descriptions-item label="URL" :span="12">
          <CopyField v-if="record.url" mouse-over :content="record.url">
          </CopyField>
          <span v-else>-</span>
        </a-descriptions-item>
        <a-descriptions-item label="请求 IP">
          <CopyField v-if="record.ip" mouse-over :content="record.ip">
          </CopyField>
          <span v-else>-</span>
        </a-descriptions-item>
        <a-descriptions-item label="请求协议">
          <TextEll :content="record.scheme || '-'"></TextEll>
        </a-descriptions-item>
        <a-descriptions-item label="HTTP 版本">
          <TextEll :content="record.http_version || '-'"></TextEll>
        </a-descriptions-item>
        <a-descriptions-item label="请求地区">
          <TextEll :content="record.rep_region || '-'"></TextEll>
        </a-descriptions-item>
        <a-descriptions-item label="浏览器">
          <TextEll :content="record.browser || '-'"></TextEll>
        </a-descriptions-item>
        <a-descriptions-item label="请求方法">
          <TextEll :content="record.method || '-'"></TextEll>
        </a-descriptions-item>
      </a-descriptions>

      <div>
        <div class="log-details-title">规则信息</div>
      </div>

      <a-descriptions
        bordered
        size="large"
        :label-style="{ width: '100px' }"
        :value-style="{ minWidth: '148px', maxWidth: '650px' }"
        :column="3">
        <a-descriptions-item label="规则 ID" :span="12">
          <CopyField v-if="record.waf_id" mouse-over :content="record.waf_id">
          </CopyField>
          <span v-else>-</span>
        </a-descriptions-item>
        <a-descriptions-item label="执行策略">
          <div v-if="record.action === 1" class="flex gap-x-1.5 items-center">
            <i-icons-prevent />
            阻止
          </div>
          <div
            v-else-if="record.action === 2"
            class="flex gap-x-1 items-center">
            <i-icons-skip />
            跳过
          </div>
          <div
            v-else-if="record.action === 3"
            class="flex gap-x-1 items-center">
            <i-icons-observe />
            观察
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="规则类型">
          <div v-if="record.module === 1" class="flex gap-x-1.5 items-center">
            自定义规则
          </div>
          <div
            v-else-if="record.module === 2"
            class="flex gap-x-1 items-center">
            速率限制
          </div>
          <div
            v-else-if="record.module === 3"
            class="flex gap-x-1 items-center">
            白名单
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="规则名称">
          <TextEll :content="record.waf_name || '-'"></TextEll>
        </a-descriptions-item>
      </a-descriptions>

      <div>
        <div class="log-details-title">其他信息</div>
      </div>

      <a-descriptions
        bordered
        size="large"
        :label-style="{ width: '100px' }"
        :value-style="{ width: '398px' }"
        :column="3">
        <a-descriptions-item label="节点 IP" :span="1">
          <TextEll :content="record.node_ip || '-'"></TextEll>
        </a-descriptions-item>
        <a-descriptions-item label="节点名称" :span="1">
          <TextEll :content="record.name || '-'"></TextEll>
        </a-descriptions-item>
        <a-descriptions-item label="节点区域" :span="1">
          <TextEll :content="record.region || '-'"></TextEll>
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </CloudDialog>
</template>
<script lang="ts" setup>
interface IProps {
  record?: any
  visible: boolean
}
interface IEmits {
  (e: 'update:visible', value: boolean): void
  (e: 'refresh'): void
}
const emits = defineEmits<IEmits>()
withDefaults(defineProps<IProps>(), {})

const handleBeforeOpen = async () => {}
const handleCancel = () => {
  emits('update:visible', false)
  emits('refresh')
}
import dayjs from 'dayjs'
</script>
<style lang="less" scoped>
.grid-demo {
  white-space: nowrap;
}

.log-details-title {
  color: var(---color-text-1, #1d2129);
  font-size: 14px;
  font-weight: 700;
  line-height: 22px; /* 157.143% */
}
.log-details-subtitle {
  color: var(----2color-text-5, #a6adb8);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px; /* 166.667% */
}
// .log-details-content {
//   border-top: 1px solid var(---color-border-2, #eeeff2);
//   border-left: 1px solid var(---color-border-2, #eeeff2);
//   width: 750px;

//   .log-details-content-key {
//     display: flex;
//     width: 100px;
//     padding: 9px 16px;
//     align-items: center;
//     align-self: stretch;
//     border-right: 1px solid var(---color-border-2, #eeeff2);
//     border-bottom: 1px solid var(---color-border-2, #eeeff2);
//     background: var(---color-fill-1, #f7f8fa);
//     color: var(----1color-text-4, #8f959e);
//     font-size: 14px;
//     font-weight: 400;
//     line-height: 22px; /* 157.143% */
//   }

//   .log-details-content-value {
//     display: flex;
//     padding: 9px 16px;
//     align-items: center;
//     gap: 6px;
//     align-self: stretch;
//     border-right: 1px solid var(---color-border-2, #eeeff2);
//     border-bottom: 1px solid var(---color-border-2, #eeeff2);

//     overflow: hidden;
//     color: var(---color-text-2, #393c40);
//     text-overflow: ellipsis;
//     font-size: 14px;
//     font-style: normal;
//     font-weight: 400;
//     line-height: 22px; /* 157.143% */
//   }
// }
.arco-descriptions {
  :deep(.arco-descriptions-body) {
    .arco-descriptions-item-label,
    .arco-descriptions-item-value {
      padding: 9px 16px;
    }
  }
}
</style>
